{% extends "templates/base.html" %}

{% block csslink %}
		{{ super() }}
		<style type="text/css" title="currentStyle">
			@import "/media/css/demo_page.css";
			@import "/media/css/demo_table.css";
		</style>
        <link rel="stylesheet" href="/media/css/ui/jquery.ui.all.css">
        
		<script src="/media/js/jquery.js"></script>
		<script src="/media/js/jquery.dataTables.js"></script>
		<script src="/media/js/ui/jquery.ui.core.min.js"></script>
		<script src="/media/js/ui/jquery.ui.datepicker.min.js"></script>
		<script src="/media/js/ui/jquery.ui.widget.min.js"></script>
        <script src="/media/js/ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
        <script src="/media/js/ui/i18n/jquery.ui.datepicker-fr.js"></script>
		<script src="/media/js/ui/jquery.ui.core.min.js"></script>
		<script src="/media/js/ui/jquery.ui.widget.min.js"></script>
		<script src="/media/js/ui/jquery.ui.mouse.min.js"></script>
		<script src="/media/js/ui/jquery.ui.button.min.js"></script>
		<script src="/media/js/ui/jquery.ui.draggable.min.js"></script>
		<script src="/media/js/ui/jquery.ui.position.min.js"></script>
		<script src="/media/js/ui/jquery.ui.resizable.min.js"></script>
		<script src="/media/js/ui/jquery.ui.dialog.min.js"></script>
		<script src="/media/js/ui/jquery.effects.core.min.js"></script>

	    <script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var wasAction = false;
				$('#table1').dataTable({
										"bPaginate": false,
			        					"bLengthChange": false,
			        					"bFilter": true,
			        					"bSort": true,
			        					"bInfo": false,
			        					"bAutoWidth": false });
				$('#table2').dataTable({
        								"bPaginate": false,
        								"bLengthChange": false,
        								"bFilter": true,
        								"bSort": true,
        								"bInfo": false,
        								"bAutoWidth": false });
				
				$('#dialog-form').dialog({
					autoOpen: false,
					height: 450,
					width: 650,
					modal: true,
					open: function(event, ui) {
						if ($('#dialog-form').data('mode') == 'add') {
							$("span.ui-dialog-title").text('Add lot owner');
							$(":button:contains('Save lot owner')").hide();
							$(":button:contains('Add lot owner')").show();
						}
						else {
							$("span.ui-dialog-title").text('Edit lot owner');
							$(":button:contains('Save lot owner')").show();
							$(":button:contains('Add lot owner')").hide();
						}
					},
					buttons: {
						"Add lot owner": function() {
							wasAction = true;
							
							$.ajax({
								type: 'POST',
								url: '/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/addowner/',
								data: $('#generated-form').serialize(),
								success: function(data) {
									$('#generated-form').html(data);
								},
								error: function (error) {
									alert('error');
								}
							})
						},
						"Save lot owner": function() {
							wasAction = true;
							
							$.ajax({
								type: 'POST',
								url: '/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/editowner/' + $("#dialog-form").data('id') + '/',
								data: $('#generated-form').serialize(),
								success: function(data) {
									$('#generated-form').html(data);
								},
								error: function (error) {
									alert('error');
								}
							})
						},
						Clear: function() {
							$('#ok').html('');
							$('#dialog-form').find('input[type=text], textarea').val('');
						}
					},
					close: function() {
						if (wasAction == true)
							window.location = "/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/detail/";
					}
				});

				$( '#add-lot-owner' )
					.click(function() {
						$('#generated-form').load('/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/addowner/');
						$('#dialog-form' ).data({'mode': 'add'});
						$('#dialog-form' ).dialog( 'open' );
				});
				
				$( '#table1 tbody tr a' ).live('click', function( e ) {
					$('#generated-form').load('/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot.key().id() }}/editowner/' + e.target.id + '/');
					$('#dialog-form').data({'mode': 'edit', 'id': e.target.id});
					$('#dialog-form').dialog( 'open' );
				});
				
				$('#dialog-form-lot-edit').dialog({
					autoOpen: false,
					height: 650,
					width: 650,
					modal: true,
					open: function(event, ui) {
						$("span.ui-dialog-title").text('Edit lot');
						$(":button:contains('Save changes')").show();
					},
					buttons: {
						"Save changes": function() {
							wasAction = true;
							$.ajax({
								type: 'POST',
								url: '/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/edit/',
								data: $('#generated-form-lot-edit').serialize(),
								success: function(data) {
									$('#generated-form-lot-edit').html(data);
								},
								error: function (error) {
									alert('error');
								}
							})
						},
						Clear: function() {
							$('#ok').html('');
							$('#dialog-form-lot-edit').find('input[type=text], textarea').val('');
						}
					},
					close: function() {
						if (wasAction == true)
							window.location = "/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/detail/";
					}
				});
				
				$('#lot-edit').click(function() {
					$('#generated-form-lot-edit').load('/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/edit/');
					$('#dialog-form-lot-edit' ).data({'mode': 'edit'});
					$('#dialog-form-lot-edit' ).dialog( 'open' );
				});
				
				// add/edit tantieme >>
				$('#dialog-form-tantieme').dialog({
					autoOpen: false,
					height: 350,
					width: 650,
					modal: true,
					open: function(event, ui) {
						if ($('#dialog-form-tantieme').data('mode') == 'add') {
							$("span.ui-dialog-title").text('Add tantieme');
							$(":button:contains('Save tantieme')").hide();
							$(":button:contains('Add tantieme')").show();
						}
						else {
							$("span.ui-dialog-title").text('Edit tantieme');
							$(":button:contains('Save tantieme')").show();
							$(":button:contains('Add tantieme')").hide();
						}
					},
					buttons: {
						"Add tantieme": function() {
							wasAction = true;
							
							$.ajax({
								type: 'POST',
								url: '/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/tantieme/add/',
								data: $('#generated-form-tantieme').serialize(),
								success: function(data) {
									$('#generated-form-tantieme').html(data);
								},
								error: function (error) {
									alert('error');
								}
							})
						},
						"Save tantieme": function() {
							wasAction = true;
							
							$.ajax({
								type: 'POST',
								url: '/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/tantieme/' + $("#dialog-form").data('id') + '/edit/',
								data: $('#generated-form-tantieme').serialize(),
								success: function(data) {
									$('#generated-form-tantieme').html(data);
								},
								error: function (error) {
									alert('error');
								}
							})
						},
						Clear: function() {
							$('#ok').html('');
							$('#dialog-form-tantieme').find('input[type=text], textarea').val('');
						}
					},
					close: function() {
						if (wasAction == true)
							window.location = "/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/detail/";
					}
				});

				$( '#add-tantieme' )
					.click(function() {
						$('#generated-form-tantieme').load('/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot_id }}/tantieme/add/');
						$('#dialog-form-tantieme' ).data({'mode': 'add'});
						$('#dialog-form-tantieme' ).dialog( 'open' );
				});
				
				$( '#table2 tbody tr a' ).live('click', function( e ) {
					$('#generated-form-tantieme').load('/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/{{ lot.key().id() }}/tantieme/' + e.target.id + '/edit/');
					$('#dialog-form-tantieme').data({'mode': 'edit', 'id': e.target.id});
					$('#dialog-form-tantieme').dialog( 'open' );
				});
				// << add/edit tantieme
			});
		</script>
{% endblock %}

{% block title %} 
	{{ title }}
{% endblock %}

{% block header %}
{{ header }}
{% endblock %}

{% block login%}
{% if show_login %}
{{ super() }}
{% endif %}
{% endblock%}

{% block navigation %}
{% if not show_login %}
{{ super() }}
{% endif %}
{% endblock %}

{% block page_name %}
{{ content_header }}
{% endblock %}

{% block main_content %}
<p>
<a href="#" id="lot-edit">Edit</a>&nbsp;||&nbsp;<a href="/ams/immeuble/{{ lot.immeuble.key().id() }}/lot/">List of lots for "{{ lot.immeuble.name }}"</a> 
	<fieldset>
	 <legend> Lot information </legend>
		<ul>
		{% for field in lot_form %}
			<li><b>{{ field.label.text }}:</b> {{ field.data }}</li>
    	{% endfor %}
	</ul>
	</fieldset>
	<br>
       <fieldset>
       <legend> Lot owners </legend>
       <a href="#" id='add-lot-owner'>Add owner</a>
       <table cellpadding="0" cellspacing="0" border="0" class="display" id="table1" >
		<thead>
			<tr>
				<th>Name</th>
				<th>Share</th>
				<th>Purchase date</th>
				<th>Sale date</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			{% for o in owners %}
			<tr class="{{ loop.cycle('even gradeC', 'odd gradeC') }}">
				<td>{{o.owner}}</td>
				<td align="center">{{ o.share }}</td>
				<td align="center">{{ o.purchase_date }}</td>
				<td align="center">{{ o.sale_date }}</td>
				<td align="right"><a href="#" id="{{ o.key().name() }}">Edit</a></td>
			</tr>
			{% endfor %}
		</tbody>
		<tfoot>
			<tr>
				<th>Name</th>
				<th>Share</th>
				<th>Purchase date</th>
				<th>Sale date</th>
				<th></th>
			</tr>
		</tfoot>
	</table>
    </fieldset>
	<fieldset>
     <legend> Tantieme </legend>
     <a href="#" id='add-tantieme'>Add tantieme</a>
	 <table cellpadding="0" cellspacing="0" border="0" class="display" id="table2" >
		<thead>
			<tr>
				<th>Charges key</th>
				<th>Tantieme</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			{% for w in bweights %}
			<tr class="{{ loop.cycle('even gradeC', 'odd gradeC') }}">
				<td>{{w.charges_key}}</td>
				<td>{{w.tantieme}}</td>
				<td align="right"><a href="#" id="{{ w.key() }}">Edit</a></td>
			</tr>
			{% endfor %}
		</tbody>
		<tfoot>
			<tr>
				<th>Charges key</th>
				<th>Tantieme</th>
				<th></th>
			</tr>
		</tfoot>
	</table>
	</fieldset>
	<div id="dialog-form" title="">
	<form action="" name="generated-form" id="generated-form" method="post">
	</form>
	</div>
	<div id="dialog-form-lot-edit" title="">
	<form action="" name="generated-form-lot-edit" id="generated-form-lot-edit" method="post">
	</form>
	</div>
	<div id="dialog-form-tantieme" title="">
	<form action="" name="generated-form-tantieme" id="generated-form-tantieme" method="post">
	</form>
	</div>
</p>
<script>
$(function() {
	var user_lang = "{{ app_user.lang }}";
	if (user_lang == "en") { user_lang = "en-GB"};
	$.datepicker.setDefaults( $.datepicker.regional[ user_lang ] );
	
	$("#purchase_date").live("focus", function() {
	    $(this).datepicker({
	        inline: true,
	    });
	});
	$("#sale_date").live("focus", function() {
	    $(this).datepicker({
	        inline: true 
	    });
	});
});
</script>			
{% endblock %}
